<!-- 平台激励活动 -->
<template>
	<div class="rewardList">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-diaodu fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>活动管理</el-breadcrumb-item>
			<el-breadcrumb-item>平台激励活动</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl mb_10" @click="goAddActives()" round size="mini"
							>新增平台激励活动</el-button
						>
					</el-col>
					<el-col :span="20"> </el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="rewadrDataList">
						<el-table-column label="序号" align="center" width="50px">
							<template slot-scope="{ $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动名称" align="center" width="220px">
							<template slot-scope="{ row }">
								<span>{{ row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动状态" align="center" width="80px">
							<template slot-scope="{ row }">
								<span class="text-gray" v-if="row.status == 1">未开始</span>
								<span class="text-success" v-if="row.status == 2">进行中</span>
								<span class="text-gray" v-if="row.status == 3">已结束</span>
								<span class="text-danger" v-if="row.status == 4">已作废</span>
							</template>
						</el-table-column>
						<el-table-column label="活动起止时间" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.time_start }} 至 {{ row.time_end }}</span>
							</template>
						</el-table-column>
						<el-table-column label="行业" align="center" width="90px">
							<template slot-scope="{ row }">
								<span>{{ row.industry_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="岗位" align="center" width="90px">
							<template slot-scope="{ row }">
								<span>{{ row.job_type_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="城市" align="center" width="90px">
							<template slot-scope="{ row }">
								<span>{{ row.city_id_name }}</span>
							</template>
						</el-table-column>

						<el-table-column label="创建人" align="center" width="90px">
							<template slot-scope="{ row }">
								<span>{{ row.creater_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" align="center">
							<template slot-scope="{ row }">
								<span>{{ row.add_time }}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" width="100px" fixed="right">
							<template slot-scope="{ row, $index }">
								<el-link :underline="false" type="success" @click="showItem(row, $index)">查看</el-link>
								<el-link
									:underline="false"
									v-if="row.status == 3"
									type="danger"
									@click="zfItem(row)"
									class="InfoFont text-primary"
									>作废</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 查看活动记录 弹框 -->
		<el-dialog title="查看激励活动记录" :visible.sync="is_setRecordDialog" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="auditCentent_next">
					<div class="row-info clear">
						<div class="fl title-key">活动名称</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.name" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next" v-if="activeInfo.ad_picture">
					<div class="row-info clear">
						<div class="fl title-key">活动广告图</div>
						<div class="fl list-cont bb">
							<img :src="activeInfo.ad_picture" class="avatar" />
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">开始时间</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.time_start" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">结束时间</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.time_end" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">所属行业</div>
						<div class="fl list-cont bb">
							<!-- <el-input size="mini" :value="industryStatusText(activeInfo.industry)" disabled></el-input> -->
							<el-input size="mini" :value="activeInfo.industry_name" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">岗位名称</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.job_type_name" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">执行城市</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.city_name" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">人才类型</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="activeInfo.work_type_name" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">周期</div>
						<div class="fl list-cont bb">
							<el-input size="mini" :value="cycleStatusText(activeInfo.cycle)" disabled></el-input>
						</div>
					</div>
				</div>
				<div class="auidrContent_next">
					<div class="row-info clear">
						<div class="fl title-key">激励规则</div>
						<div class="fl list-cont">
							<div class="rule-item" v-for="(item, index) in activeInfo.rule" :key="index">
								<el-input class="fl w_50" disabled :value="item.days.start"></el-input>
								<span class="fl rule-text"> {{ ruleText }} </span>
								<el-input class="fl w_50" disabled :value="item.days.end"></el-input>
								<span class="fl rule-text"> 小时，补贴 </span>
								<el-input class="fl w_50" disabled :value="item.reward"></el-input>
								<span class="fl rule-text"> 元/小时； </span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="resetBtn" @click="hiddenRY()">关闭</span>
			</div>
		</el-dialog>
		<!-- 作废确认弹框 -->
		<el-dialog title="温馨提示" :visible.sync="is_setZfDialog" width="460px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>您确认要作废该条活动记录吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="conformZf()">确 定</span>
				<span class="resetBtn" @click="hiddenRY()">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { fetchRewardList, rewardIncalid, rewardActivityInfo } from '@/api/activity.js'
const INDUSTRY_STATUS = {
	1: '餐饮'
}
const CYCLE_STATUS = {
	month: '每半月'
}
export default {
	data() {
		return {
			id: '',
			head_url: 'https://img.zhongfuyun.com/',
			rewadrDataList: [],
			ruleText: '﹤累计出工时长≤', // 文本变量
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: '',
			is_setRecordDialog: false, // 查看
			is_setZfDialog: false, // 作废
			activeInfo: '', // 活动详情
			localobList: JSON.parse(localStorage.getItem('industryJobList'))
		}
	},
	//生命周期 - 创建完成（访问当前this实例）
	created() {
		this.getRewardList() //活动列表
	},
	//生命周期 - 挂载完成（访问DOM元素）
	mounted() {},
	methods: {
		// 行业字段
		industryStatusText(status) {
			return INDUSTRY_STATUS[status]
		},
		// 周期字段
		cycleStatusText(status) {
			return CYCLE_STATUS[status]
		},
		// 新增平台激励活动
		goAddActives() {
			this.$router.push('/rewardAdd')
		},

		// 查看
		showItem(row) {
			this.is_setRecordDialog = true
			// 查询单条活动接口
			this.getActivityInfo(row)
		},
		// 作废-弹窗
		zfItem(row) {
			this.is_setZfDialog = true
			this.id = row.id
		},
		// 确认作废
		async conformZf() {
			try {
				let ret = await rewardIncalid({
					id: this.id // 活动id
				})
				this.$message.success('操作成功')
				this.hiddenRY()
				// 更新列表（单条）
				// this.rewadrDataList.forEach(item=>{
				//   console.log(item)
				// })
				this.getRewardList()
			} catch (err) {
				console.log('error:', err)
			}
		},
		hiddenRY() {
			this.is_setRecordDialog = false
			this.is_setZfDialog = false
			this.activeInfo = ''
			this.id = ''
		},

		// 获取激励列表数据
		async getRewardList() {
			try {
				let ret = await fetchRewardList({
					type: 3,
					pageSize: this.pageSizeNow,
					page: this.pageNum
				})
				if (ret.list) {
					this.rewadrDataList = ret.list
					this.total = ret.count
				} else {
					this.rewadrDataList = []
				}
			} catch (error) {
				console.log('error:', error)
			}
		},

		// 活动详情
		async getActivityInfo(row) {
			try {
				let ret = await rewardActivityInfo({
					id: row.id
				})
				this.activeInfo = ret
				this.activeInfo.work_type_name = ret.work_type_name.toString()
				if (this.activeInfo.ad_picture) {
					this.activeInfo.ad_picture = this.head_url + ret.ad_picture
				}
				this.activeInfo.industry_name = row.industry_name
			} catch (err) {
				console.log('error:', err)
			}
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.getRewardList()
		}
	}
}
</script>
<style scoped>
/* @import url(); 引入css类 */
img {
	width: 128px;
}
.row-info {
	padding: 10px 0;
}
.rule-item {
	display: flex;
	margin-bottom: 10px;
}
.rule-item span {
	color: #888;
}
.rule-text {
	margin: 0 10px;
}
</style>



// WEBPACK FOOTER //
// src/components/reward/List.vue